<template>
  <view class="container">
   <view class="swiper-container" v-if="bicAdvertisementImage.length">
   	<swiper
   	  class="custom-swiper"
   	  :autoplay="true"
   	  :interval="3000"
   	  :circular="false"
   	>
   	  <swiper-item v-for="(item,index) in bicAdvertisementImage">
   		  <view class="swView">
   			    <image :src="item.imageUrl" mode="widthFix" class="qunImg"></image>
   		  </view>
   	  </swiper-item>
   	 
   	</swiper>
   </view>  
  <view class="goods-list">
	<view v-for="(item, index) in goodsList" :key="index" @click="goDetail(item)">
		<view class="goods-item" v-if="item.currentStock>0">
		  <!-- 商品图片 -->
		  <image class="goods-img" v-if="item.packageCoverImage" :src="item.packageCoverImage" mode="aspectFill"></image>
		   <image class="goods-img" v-else src="/static/img/icon_haibao.png" mode="aspectFill"></image>
		  
		  <!-- 商品信息 -->
		  <view class="goods-info">
		    <!-- 第一行：商品名称 -->
		    <view class="goods-name">{{item.name}}</view>
		    
		    <!-- 第二行：分享标签和距离 -->
		    <view class="row-second">
		      <view >
		      		<view class="share-tag" v-if="item.share==1"> 分享得金币</view>
		      </view>
			  <view v-if="item.mapVos">
				   <text class="distance">{{item.mapVos[0].distanceStr}}</text>
			  </view>
		     
		    </view>
		    <view class="threeROw">
		    	<!-- 第三行：价格信息 -->
		    	<view class="price-section">
		    	  <view class="price-left">
		    	    <text class="sale-price">¥{{item.newPrice}}</text><!-- currentPrice -->
		    	    <text class="market-price">¥{{item.originalPrice}}</text>
		    	  </view>
		    	  <view class="price-right">
		    	     <text class="views">{{item.browseNum}}人浏览</text>
		    	    <!-- <text class="bargain-count">{{item.bargainNum}}人砍价</text> -->
		    	   </view> 
		    	</view>
		    	
		    	<!-- 砍价按钮 -->
		    	<!-- 砍价按钮 -->
		    	<view v-if="item.currentStock>0">
		    		<view class="bargain-btn" v-if="item.type==2&&item.bargain">再砍</view>
		    		<view class="bargain-btn" v-else-if ="item.type==2&&item.bargain==false" @click.stop="bargainItem(item)">砍价</view>
		    		<view class="bargain-btn" v-else>抢购</view>
		    	</view>
		    	<view v-else class="bargain-btn2">售罄</view>
		    </view>
		   
		  </view>
		</view>
		<view v-else>
				<image class="goods-imgLogo" v-if="item.logo" :src="item.logo" mode=""></image>
				<image class="goods-imgLogo" v-else src="/static/img/icon_haibao.png" mode="aspectFill"></image>
			</view>
		
	</view>
    
	
	
	
  </view>
  <nodata v-show="goodsList.length==0"></nodata>
  </view>
</template>

<script>
import nodata from '@/components/nodata/nodata.vue'
export default {
	components: {
		nodata
	},
  data() {
    return {
       goodsList: [],
	   location: {
	   	cityName: '',
	   	cityCode: '',
	   	lng: '',
	   	lat: '',
	   },
	    page:1,
		userInfo:'',
		bicAdvertisementImage:[],
		ckCity:'',
		version:2,
    }
  },
 onLoad() {
	
	this.bicAdvertisementImageInfo()
 },
 onShow() {
 	this.ckCity=uni.getStorageSync("ckCity")
	this.location= uni.getStorageSync("location")
	this.userInfo=uni.getStorageSync("userInfo")
	this.getList()
 },
 onPullDownRefresh() {
 	//下拉刷新
 	 this.page==1
 	 this.getList()
 	 this.bicAdvertisementImageInfo()
 	setTimeout(function() {
 		uni.stopPullDownRefresh();
 	}, 1000);
 },
 onReachBottom() {
 	this.page++;
    this.getList()
 },
 methods: {
	 bicAdvertisementImageInfo(){
	 	  this.$http('jeecg-boot/app/market/bicAdvertisementImageInfo/list',{
	 	  		   goodsConsumeType:1
	 	  },'GET').then(res => {
	 		  this.bicAdvertisementImage=res.result
	 	  })
	 },
  goDetail(item){
  	 uni.navigateTo({
  	 	url:'../index/goodsDetail?id='+item.id
  	 })  
  },
  getList(){
 	 uni.showLoading({
 	 	title: '加载中'
 	 })
	 if(this.page==1){
	 	this.goodsList=[]
	 }
	 if(this.ckCity.type==2){
	 	var obj={
	 			pageNo:this.page,
	 			pageSize:10,
	 			//startLng:this.locationCity.lng,
	 			//startLat:this.locationCity.lat,
	 			userId:this.userInfo.id,
	 			type:1,
	 			productCategory:this.productCategory,
	 			area:this.ckCity.areaCode,
				appVersion:this.version
	 		}
	 }else{
	 		   var obj={
	 		   pageNo:this.page,
	 		   pageSize:10,
	 		   startLng:this.location.lng,
	 		   startLat:this.location.lat,
	 		   userId:this.userInfo.id,
	 		   type:1,
	 		   productCategory:this.productCategory,
			   appVersion:this.version
	 		   //area:this.ckCity.areaCode
	 }
	 }
 	 this.$http('jeecg-boot/app/market/bicProduct/qyeryPage',obj,'POST').then(res => {
 	 		   //console.log(res)
 	 	     uni.hideLoading();
 	 		 var goodsList=res.result.records
 	 		 goodsList.forEach(item=>{
 	 			 if(item.mapVos){
 	 				 item.mapVos.sort((a, b) => a.distance - b.distance);
 	 			 }
				var admJianNum=item.admJianNum?item.admJianNum:0
				var newPrice=item.currentPrice + admJianNum
				 item.newPrice=newPrice.toFixed(2)
 	 			 
 	 		 })
 	 		 this.goodsList=[...this.goodsList, ...goodsList]
			/* if(this.goodsList.length<10){
			 			 var chongfudata=this.goodsList
			 			 this.goodsList=[...this.goodsList, ...chongfudata]
			 			 this.goodsList=[...this.goodsList, ...chongfudata]
			 } */
 	 	 //this.goodsList2=res.result.records
 	  })
  }
 }
}
</script>

<style scoped lang="less">
.container{
	min-height: 100vh;
	 background: #f4f4f4;
}
/* 商品列表样式 */
.goods-list {
  padding: 20rpx;
  .goods-item {
    display: flex;
    background-color: #fff;
    border-radius: 12rpx;
    overflow: hidden;
    margin-bottom: 20rpx;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  }
  
  .goods-img {
    width: 240rpx;
    height: 240rpx;
    flex-shrink: 0;
  }
  
  .goods-info {
    flex: 1;
    padding: 20rpx;
    display: flex;
    flex-direction: column;
  }
  
  .goods-name {
    font-size: 30rpx;
    color: #333;
    font-weight: bold;
    margin-bottom: 15rpx;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
  
  .row-second {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15rpx;
  }
  
  .share-tag {
    font-size: 22rpx;
    color: #EC0F0A;
    border: 1rpx solid #EC0F0A;
    border-radius: 20rpx;
    padding: 4rpx 12rpx;
  }
  
  .distance {
    font-size: 24rpx;
    color: #999;
  }
  
  .price-section {
   /* display: flex;
    justify-content: space-between;
    margin-top: auto; */
  }
  .threeROw{
  	display: flex;
  	 justify-content: space-between;
  }
  .price-left {
    display: flex;
    align-items: baseline;
  }
  
  .sale-price {
    font-size: 36rpx;
    color: #EC0F0A;
    font-weight: bold;
    margin-right: 10rpx;
  }
  
  .market-price {
    font-size: 24rpx;
    color: #999;
    text-decoration: line-through;
  }
  
  .price-right {
   /* display: flex;
    flex-direction: column;
    align-items: flex-end; */
  }
  
  .views, .bargain-count {
    font-size: 22rpx;
    color: #999;
  }
  
  .bargain-btn {
    align-self: flex-end;
    margin-top: 10rpx;
    background: linear-gradient(to right, #FF5F5F, #EC0F0A);
    color: #fff;
    font-size: 26rpx;
    padding: 8rpx 30rpx;
    border-radius: 30rpx;
    box-shadow: 0 4rpx 10rpx rgba(236, 15, 10, 0.3);
  }
}
.custom-swiper{
	height: 420rpx;
}
.swiper-container {
  width: 100%;
 /* padding: 20rpx 0; */
  background-color: #fff;
}
.qunImg{
	width: 100%;
}
.bargain-btn2{
	  align-self: flex-end;
	  margin-top: 10rpx;
	  background: #999;
	  color: #fff;
	  font-size: 26rpx;
	  padding: 8rpx 30rpx;
	  border-radius: 30rpx;
	  box-shadow: 0 4rpx 10rpx rgba(236, 15, 10, 0.3);
  }
.goods-imgLogo{
	width: 100%;
	height: 300rpx;
	border-radius: 20rpx;
}
</style>